<template>
  <!--案件分配-->
  <section class="component case-distribution">
    <distribution-pattern v-model="model.model" @on-select-change="refreshData"></distribution-pattern>
    <data-box :data="dataSet">
      <template slot="columns">
        <!--数据列区域-->
        <el-table-column prop="outsourceName" label="委外方" :min-width="$helper.getColumnWidth(3)">
        </el-table-column>
        <el-table-column prop="currentNum" label="当前案件数" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="currentAmt" label="当前案件总金额" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column label="确认分配案件数" :min-width="$helper.getColumnWidth(5)">
          <template slot-scope="scope">
            <el-input type="number" v-model="scope.row.num" :min="0" :max="selectedCaseIds.length" :precision="0" :disabled="model.model !== 'BY_CUSTOMIZE'"></el-input>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="sumCapital" label="案件本金总额" :min-width="$helper.getColumnWidth(4)">
          <template slot-scope="scope">
            <span v-if="!!model.model">{{scope.row.sumCapital}}</span>
            <span v-else>-</span>
          </template>
        </el-table-column> -->
        <el-table-column prop="sumAmt" label="案件总金额" :min-width="$helper.getColumnWidth(4)">
          <template slot-scope="scope">
            <span v-if="!!model.model">{{scope.row.sumAmt}}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="sumNum" label="案件总数量" :min-width="$helper.getColumnWidth(4)">
          <template slot-scope="scope">
            <span v-if="!!model.model">{{scope.row.sumNum}}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
      </template>
      <template slot="buttons">
        <p>{{`共选择待分配案件数:${selectedCaseIds.length}条`}}</p>
      </template>
    </data-box>

    <el-form :rules="companyRules" :model="model" ref="form" label-width="120px" >
      <el-form-item label="委外到期时间" prop="outEndDate" v-if="!isLawsuit">
        <el-date-picker v-model="model.outEndDate" value-format="yyyy-MM-dd" type="date" placeholder="请选择日期">
        </el-date-picker>
      </el-form-item>
    </el-form>

    <div class="operate-buttons">
      <el-button @click="emitPre">上一步</el-button>
      <el-button @click="emitClose">取 消</el-button>
      <el-button @click="submit">确定</el-button>
    </div>
  </section>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import DataBox from '~/components/common/data-box.vue';
import { Dependencies } from '~/core/decorator';
import { Emit, Prop, Watch } from 'vue-property-decorator';
import { OutsourceStayService } from "~/services/domain-service/outsource-stay-manage.service";
import { OutsourceLawsuitStayService } from "~/services/domain-service/outsource-lawsuit-manage.service";
import DistributionPattern from "~/components/distribution-common/distribution-pattern.vue";
import { Form } from "element-ui";

@Component({
  components: {
    DataBox,
    DistributionPattern
  }
})
export default class CaseDistribution extends Vue {
  @Dependencies(OutsourceStayService) private outsourceStayService: OutsourceStayService;
  @Dependencies(OutsourceLawsuitStayService) private outsourceLawsuitStayService: OutsourceLawsuitStayService;
  @Prop({
    required: true,
    default: () => []
  })
  private selectedCaseIds: string[]

  @Prop({
    required: true,
    default: () => []
  })
  private commissionIds: string[]

  /**
   * 是否全部数据
   */
  @Prop({ required: true })
  private isLawsuit: boolean;

  private dataSet: any[] = [];
  //判断确认分配案件是否有值
  private numFlag: boolean = false;

  private model: any = {
    model: 'BY_CUSTOMIZE',
    outEndDate: "",
    analyseId: ""
  }

  private companyRules: any = {
    outEndDate: [
      { required: true, message: '请选择委外到期时间' },
    ],
  };

  public refresh() {
    this.model.model = 'BY_CUSTOMIZE'
    const form = this.$refs.form as Form;
    form.resetFields()
    this.refreshData()
  }

  /**
   * 刷新分案预览数据
   */
  public refreshData() {
    const currentMonth: any = new Date().getMonth();
    this.model.outEndDate = this.$filter.dateTimeFormat(
      new Date().setMonth(currentMonth+2),
    );
    const requestModel = {
      caseIds: this.selectedCaseIds,
      distributeMode: this.model.model || null,
      outsourceIds: this.commissionIds
    }
    if (!this.isLawsuit) {
      this.outsourceStayService.searchSplitPreview(requestModel).subscribe(data => {
        this.model.analyseId = data.analyseId
        this.dataSet = data.resDistModel
        console.log(this.dataSet,"dataSet")
      })
    } else {
      this.outsourceLawsuitStayService.searchSplitPreview(requestModel).subscribe(data => {
        this.model.analyseId = data.analyseId
        this.dataSet = data.resDistModel
        console.log(this.dataSet,"dataSet")
      })
    }
  }

  @Emit('pre')
  private emitPre() {

   }

  @Emit("close")
  private emitClose() {
    this.model.outEndDate ='';
   }

  @Emit('success')
  private emitSuccess() {
    this.model.outEndDate ='';
    this.$message.success("案件分配成功")
  }


  private submit() {
    this.numFlag = false
    const form = this.$refs.form as Form;
    form.validate(v => {
      if (!v) return
      const caseCount = this.dataSet.reduce((a, c) => a + c.num, 0)
      //2019.6.28修改，根据选中案件的数组长度做比较
      if (caseCount > this.selectedCaseIds.length) {
        this.$message("确认分配案件数不能大于选择的案件总数")
        return
      }
      this.dataSet.map((v) =>{
        if(parseInt(v.num)===0) return this.numFlag = true
      })
      if(this.numFlag) return this.$message("请先确认分配案件数")
      this.model.caseIds = this.selectedCaseIds
      this.model.outsourceIds = this.commissionIds
      this.model.distributeNumber = this.dataSet.map((v) => parseInt(v.num))
      this.model.distributeMode = this.model.model
      this.distributionCase()
    })
  }

  private distributionCase() {
    if (!this.isLawsuit) {
      this.outsourceStayService.confirmDistributeCase(this.model).subscribe(this.emitSuccess)
    } else {
      this.outsourceLawsuitStayService.confirmDistributeCase(this.model).subscribe(this.emitSuccess)
    }
  }


}
</script>
<style lang="less" scoped>
.component.case-distribution {
  .distribution-databox {
    margin-top: -20px;
  }
}
</style>
